
import React, { Component } from 'react';

import { NavBar, Icon, Toast } from 'antd-mobile';
import { CURRENT_CITY } from '../../utils/config.js'

// 1.0 从react-virtualized导入List组件(List：负责对数据进行可视化区域渲染)
// AutoSizer：自动获取到当前页面的宽高可以给List的宽和高进行满屏设置
import { AutoSizer, List } from 'react-virtualized'
import '../../assets/fonts/iconfont.css'
import './citylist.scss'
import { get_City_Data, get_Current_City, get_Hot_City } from '../../utils/http_biz.js'

// const list = new Array(100).fill('虚拟列表')
const cityList = ['北京', '上海', '广州', '深圳'];// 表示这四个城市有房源数据

class CityList extends Component {
    state = {
        activeIndex: 0,  // 用来控制右边城市索引的激活状态
        citylist: {},
        cityIndex: [], // #：代表当前城市  热：代表热门城市
    }
    // 动态获取服务器的城市数据
    async componentDidMount() {
        let { body } = await get_City_Data();
        // 改造body中的数组对象为 state中的citylist 要求的格式
        await this.bodyToCityList(body)

        // 调用List方法measureAllRows进行预渲染，注意小坑：一定要确保List组件的数据渲染完成再调用这个方法，不然没有用
        await this.measureAllRows();
    }

    async measureAllRows() {
        await this.listRef.current.measureAllRows();
    }

    // 改造body中的数组对象为 state中的citylist 要求的格式
    async bodyToCityList(list) {
        // 1.0 定义一个最终的数据对象
        let obj = {};
        let cindex = [];
        let firstChar = ''
        list.forEach(item => {
            // 2.0 获取到item对象的short属性的首字母
            firstChar = item.short.slice(0, 1);
            firstChar = firstChar.toUpperCase()
            // cindex.push(firstChar);
            // 3.0 判断firstChar在obj中是否存在
            // console.log(obj[firstChar]);
            if (obj[firstChar]) {
                // 如果存在则push新数据
                obj[firstChar].push(item);
            } else {
                // 如果不存在则赋值新数组
                obj[firstChar] = [item];
            }
        })

        // 4.0 cindex中是数据通过obj的key来获取
        cindex = Object.keys(obj);

        // 5.0 将cindex数组进行排序
        cindex.sort();

        // 6.0 追加当前城市数据
        // 6.0.1 获取当前城市数据
        // {label:'广州',value:'ddd'}
        let Current_City = await get_Current_City();
        // 6.0.2 将Current_City追加到obj对象的 # 属性中
        obj['#'] = [Current_City];


        // 7.0 追加热门城市 key=”热“
        let hotCityList = await get_Hot_City();
        obj['热'] = hotCityList;
        cindex.unshift('热');
        cindex.unshift('#');
        // console.log(cindex);
        // console.log(obj);

        // 4.0 将obj更新到state中的citylist属性中
        // 5.0 将cindex 更新到state中的cityIndex属性中
        this.setState({ citylist: obj, cityIndex: cindex })

        // this.setState({})
    }

    listRef = React.createRef() // 创建了一个非受控对象
    rowRenderer = ({
        key, // Unique key within array of rows
        index, // List组件每渲染一行的索引，从0开始
        isScrolling, // true: 开始滚动了  false：没滚动
        isVisible, // true：表示这个元素是隐藏的   false：表示这个值是显示的
        style, // 样式设置对象
    }) => {
        // console.log('isScrolling=>' + isScrolling + '  isVisible=' + isVisible);
        // console.log(index);
        // 数据动态化1.0 ： 根据index 的值取this.state.cityIndex对应的文本
        let cityindexText = this.state.cityIndex[index];
        // 数据动态化2.0 :根据cityindexText 去this.state.cityList 中取对应的城市数组
        let cityArr = this.state.citylist[cityindexText];
        return (
            //    将List每一项的结构改造成我们自己想要显示的结构
            <div key={key} style={style} className="item">
                <div className="itemIndex">{cityindexText.toUpperCase()}</div>
                {
                    cityArr.map(item => (
                        // 渲染城市
                        <div onClick={() => {
                            // 0.0 判断当前用户点击的城市如果不是cityList 中的任意一个，则提示用未开通房源信息
                            if (cityList.indexOf(item.label) <= -1) {
                                // 利用antd-mobile中的Toast
                                Toast.info(`您选择的城市${item.label}未开通房源,请选择北、上、广、深四个城市`, 1);
                                return;
                            }
                            // 1.0 获取当前选择的城市对象保存到本地存储中
                            localStorage.setItem(CURRENT_CITY, JSON.stringify(item))

                            // 2.0 跳转到首页
                            this.props.history.push('/home/index')

                        }} key={item.value} className="itemName">{item.label}</div>
                    ))
                }

            </div>
        );
    }

    // 定义方法用来生成每一项的实际高度
    rowHeight = ({ index }) => {
        // index代表的是List的每一项的索引值
        // 计算每一项的高度公式：总高度 = 36 + 当前索引对应的城市数组长度() * 每一个城市的高度 50
        let cityindex = this.state.cityIndex[index];
        let cityLng = this.state.citylist[cityindex].length;
        let rowHeight = 36 + cityLng * 50;
        return rowHeight;
    }

    // 定义rowsRendered
    rowsRendered = ({
        overscanStartIndex,
        overscanStopIndex,
        startIndex,
        stopIndex }) => {
        // startIndex 表示当前这个项出现的时候就会将其索引传入进来
        // 将startIndex更新到 state的activeIndex属性中
        this.setState({ activeIndex: startIndex });
        // console.log(startIndex);
    }

    render() {
        return (<div className="citylist">
            <NavBar
                mode="light"
                icon={<i className="iconfont icon-back"> </i>}
                onLeftClick={() => { this.props.history.go(-1) }}
            >城市选择</NavBar>

            {/* 列表结构编写 */}
            <AutoSizer>
                {({ height, width }) => (
                    <List
                        ref={this.listRef}
                        width={width}    // 表示列表的宽度300
                        height={height}    // 表示列表的高度300
                        rowCount={this.state.cityIndex.length}   // 这个表示列表的渲染数据条数
                        rowHeight={this.rowHeight}   // 表示每一行数据的高度为20  这个高度会根据每一行数据的实际高度计算出来
                        rowRenderer={this.rowRenderer}   // 每一行数据渲染的自定义函数，在这个函数中可以返回我们自己编写的html结构
                        onRowsRendered={this.rowsRendered}   // 当用户拖动虚拟列表的时候，某一项靠定就会触发，并且传入相应的参数
                        scrollToAlignment="start"  // 告诉list组件当前这一项自动滚动到开始位置
                    />
                )}
            </AutoSizer>

            {/* 生成城市索引的静态结构 */}
            <div className="rightindex">
                <ul>
                    {
                        this.state.cityIndex.length > 0 &&
                        this.state.cityIndex.map((item, index) => (
                            <li key={item}
                                onClick={() => { this.listRef.current.scrollToRow(index); }}
                                className={index == this.state.activeIndex ? "active" : ""}>{item}</li>
                        ))
                    }
                </ul>
            </div>
        </div>);
    }
}

export default CityList;